<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Laundry: Admin</title>
</head>
<body style="font-size:70%;">
<link href="js/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script > 
$(document).ready(function() {   
    //$('#isLive').hide(); 
    //$('#remark').hide();    
    //$('#addDiv').hide();
	//$('#addDiv').hide();
	getUser();
	 username='';
	
  });
function getUser(){
	 var requestUrl="rest/test/req";
	 $.ajax({
			type: "GET",		
			url:requestUrl ,			
			contentType: "application/html; charset=utf-8",
			dataType: "HTML",
			success: function(arg) {	
				username=arg;					
			},
			timeout: 30000,
			error: function(request, error) {
			alert( error);
			},
			async: true
			});
} 
function getMachines(){ 
	  var requestUrl = "rest/admin/getmachines?isLive=true";     

	  $.ajax({
			type: "GET",		
			url:requestUrl ,			
			contentType: "application/html; charset=utf-8",
			dataType: "JSON",
			success: function(data) {	
		 	 if(data.length!=0){
	        	 
	        	$('#Machines').html('<table border="0" id="machineDetails" cellpadding="5"><tr><td align="center" valign="middle" > <b> Machine Id </b></td><td align="center" valign="middle" > <b> IsLive </b> </td><td align="center" valign="middle" > <b> Remarks </b> </td></tr></table>');//<td align="center" valign="middle" > <b> Last Updated </b> </td>
	        	for(var i=0;i<data.length;i++){   
	        		$('#machineDetails tr:last').after(" <tr> <td align=\"center\">"+data[i].machineId+" </td> <td align=\"center\"> "+data[i].live+" </td><td align=\"center\"> "+data[i].remarks+ "</td>");//<td align=\"center\">"+data[i].lastUpdated+"</td>
	      	       	
	            }
	        } 					
			},
			timeout: 30000,
			error: function(request, error) {
			alert( error);
			},
			cache:false,
			async: true
			});          
   /* $.getJSON(requestUrl,
    function(data) { 	     	
        if(data.length!=0){
        	 
        	$('#Machines').html('<table border="0" id="machineDetails" cellpadding="5"><tr><td align="center" valign="middle" > <b> Machine Id </b></td><td align="center" valign="middle" > <b> IsLive </b> </td><td align="center" valign="middle" > <b> Remarks </b> </td></tr></table>');//<td align="center" valign="middle" > <b> Last Updated </b> </td>
        	for(var i=0;i<data.length;i++){   
        		$('#machineDetails tr:last').after(" <tr> <td align=\"center\">"+data[i].machineId+" </td> <td align=\"center\"> "+data[i].live+" </td><td align=\"center\"> "+data[i].remarks+ "</td>");//<td align=\"center\">"+data[i].lastUpdated+"</td>
      	       	
            }
        }                        	                                            
    }); */  
}
function drawAddMachine(){
	$('#Machines').html('<table id="addTable">'+
	'<tr>'+
	'<td> <select id="isLive">  <option value="true">  Live </option> <option value="false"> Disabled </option> </select> </td>'+
	'<td> Remarks: <input type="text" id="remark" value="'+username+'"/> </td> '+
	'<td> <button id="addButton" onclick="addMachine();"> Add </button></td>'+
	'</tr>'+
	'</table>' );
}
function addMachine(){ 
	
	  var requestUrl = "rest/admin/add?";//isLive=true&remarks=test";    
	  requestUrl+="isLive="+$('#isLive').val()+"&remarks="+ $('#remark').val();   
	  $.ajax({
			type: "GET",		
			url:requestUrl ,			
			contentType: "application/html; charset=utf-8",
			dataType: "JSON",
			success: function(data) {	
				 getMachines(); 					
			},
			timeout: 30000,
			error: function(request, error) {
			alert( error);
			},
			cache:false,
			async: true
			});

		      
  /*$.getJSON(requestUrl,
  function(data) { 	   	
      if(data.length!=0){      	 
    	  getMachines();
       }                        	                                            
  });*/  
  //$('#remark').val("");
}


function setMachinedateAvailability(){
	//var machineDateAvailability={};
	var machineDetails = new Array();
	 var rows=$('#machineDetails tr').length-1;
	$('#machineDetails tr').each(function(rowIndex){

		if(rowIndex !=0 && rowIndex !=rows){
			var machineDateAvailability={};
		    $(this).find('td').each(function(index){		    	
		    	if(index==0){ 
		    		machineDateAvailability.machineId=$(this).html();//alert($(this).html());//
		    		//alert($(this).html());
		    	}
		    	else if(index==2){
		    		machineDateAvailability.remarks= $(this).find(".macrem").val();
		    	//alert($(this).find(".macrem").val());
		    	}
		    	else if(index==1){
		    	machineDateAvailability.available=$(this).find(".macstatus").val();
		    	//alert($(this).find(".macstatus").val());		    	
		    	}

		    	//var selDate=new Date();		    	
		    	//selDate=$("#datepicker").val();
		    	//selDate=selDate.format("yyyy-mm-dd");
		    	$( "#datepicker" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
		    	machineDateAvailability.date=$("#datepicker").val();
		    	$( "#datepicker" ).datepicker( "option", "dateFormat", 'mm/dd/yy' );
		    	//machineDateAvailability.date=machineDateAvailability.date.format("yyyy-mm-dd") ;
		    })
		    if(machineDateAvailability.available!=null && machineDateAvailability.available!=-1){ 
		    	machineDetails.push(machineDateAvailability);
		    }
	   }
	});	
	var ur="rest/admin/setmachinedateavailability";	
	$.ajax({
		type: "POST",		
		url:ur ,
		cache: false,
		data:JSON.stringify(machineDetails),
		contentType: "application/json; charset=utf-8",
		dataType: "JSON",
		success: function(arg) {	
			alert('Number of machines added : '+arg); 	
			getMachinesAvailableOnAday();
		},
		timeout: 30000,
		error: function(request, error) {
		alert( error);		
		},
		async: true
		});	
}

function drawSetmachineAvailability(){
	$("#Machines").html('<table border="0"> <tr>  <td  align="center" valign="top" height="200px" > <div id="datepicker"></div> </td> <td  align="center" valign="top" height="200px" > <div id="machineAvailable"></div> </td></tr> </table>');
	 $("#datepicker").datepicker({ onSelect: function(dateText, inst) { getMachinesAvailableOnAday(); } });
	 //$( "#datepicker" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
}

function getMachinesAvailableOnAday(){
	var requestUrl = "rest/admin/getmachinesondate?isLive=true&date="+ $("#datepicker").val();	    
	$.ajax({
		type: "GET",		
		url:requestUrl ,
		cache: false,			
		contentType: "application/html; charset=utf-8",
		dataType: "JSON",
		success: function(data) {	
		if(data.length!=0){
       	 
        	$('#machineAvailable').html('<table border="0" id="machineDetails"><tr><td align="center" valign="middle" > <b> Machine Id </b></td> <td align="center" valign="middle" > <b> Status </b></td><td align="center" valign="middle" > <b> Remarks </b></td></tr></table>');
        	for(var i=0;i<data.length;i++){
            	if(data[i].date==null){
            		$('#machineDetails tr:last').after(" <tr> <td class=\"macid\">"+data[i].machineId+"</td><td><select id=\""+ data[i].machineId+"\" class=\"macstatus\" ><option value=\"-1\"> Not Set </option><option value=\"true\"> Available </option><option value=\"false\"> Not Available </option> </select></td><td> <input id=\"rem"+data[i].machineId+"\" value=\""+username+ "\" class=\"macrem\"/></td>");
            	}
            	else{  
                	if(data[i].available==true){
                		$('#machineDetails tr:last').after(" <tr> <td class=\"macid\">"+data[i].machineId+"</td><td><select id=\""+ data[i].machineId+"\" class=\"macstatusDisabled\" disabled=\"disabled\"><option value=\"true\"> Available </option><option value=\"false\"> Not Available </option> </select></td><td> <input id=\"rem"+data[i].machineId+"\" value=\""+data[i].remarks+"\" class=\"macremDisabled\" disabled=\"disabled\" /></td>");
                	}
                	else{
                		$('#machineDetails tr:last').after(" <tr> <td class=\"macid\">"+data[i].machineId+"</td><td><select id=\""+ data[i].machineId+"\" class=\"macstatus\"><option value=\"false\"> Not Available </option><option value=\"true\"> Available </option> </select></td><td> <input id=\"rem"+data[i].machineId+"\" value=\""+data[i].remarks+"\" class=\"macrem\"/></td>");
                	}        		
            	}      	       	
            }
        	$('#machineDetails tr:last').after(" <tr> <td colspan=\"3\"><Button id=\"populateButton\" onclick=\"setMachinedateAvailability();\"> Update Machine Availabilty </button> </td> </tr> ");
        }
		},
		timeout: 30000,
		error: function(request, error) {
		alert( error);		
		},
		async: true
		});	           
   /* $.getJSON(requestUrl,
    function(data) { 	     	
        if(data.length!=0){
        	 
        	$('#machineAvailable').html('<table border="0" id="machineDetails"><tr><td align="center" valign="middle" > <b> Machine Id </b></td> <td align="center" valign="middle" > <b> Status </b></td><td align="center" valign="middle" > <b> Remarks </b></td></tr></table>');
        	for(var i=0;i<data.length;i++){
            	if(data[i].date==null){
            		$('#machineDetails tr:last').after(" <tr> <td class=\"macid\">"+data[i].machineId+"</td><td><select id=\""+ data[i].machineId+"\" class=\"macstatus\" ><option value=\"-1\"> Not Set </option><option value=\"true\"> Available </option><option value=\"false\"> Not Available </option> </select></td><td> <input id=\"rem"+data[i].machineId+"\" value=\""+username+ "\" class=\"macrem\"/></td>");
            	}
            	else{  
                	if(data[i].available==true){
                		$('#machineDetails tr:last').after(" <tr> <td class=\"macid\">"+data[i].machineId+"</td><td><select id=\""+ data[i].machineId+"\" class=\"macstatusDisabled\" disabled=\"disabled\"><option value=\"true\"> Available </option><option value=\"false\"> Not Available </option> </select></td><td> <input id=\"rem"+data[i].machineId+"\" value=\""+data[i].remarks+"\" class=\"macremDisabled\" disabled=\"disabled\" /></td>");
                	}
                	else{
                		$('#machineDetails tr:last').after(" <tr> <td class=\"macid\">"+data[i].machineId+"</td><td><select id=\""+ data[i].machineId+"\" class=\"macstatus\"><option value=\"false\"> Not Available </option><option value=\"true\"> Available </option> </select></td><td> <input id=\"rem"+data[i].machineId+"\" value=\""+data[i].remarks+"\" class=\"macrem\"/></td>");
                	}        		
            	}      	       	
            }
        	$('#machineDetails tr:last').after(" <tr> <td colspan=\"3\"><Button id=\"populateButton\" onclick=\"setMachinedateAvailability();\"> Update Machine Availabilty </button> </td> </tr> ");
        }                        	                                            
    });*/
}

function drawOpenBooking(){
	$("#Machines").html('<table border="0"> <tr>  <td  align="center" valign="top" height="200px" > <div id="datepicker"></div> </td> <td  align="center" valign="top" height="200px" > <div id="openBookingButton"></div> </td></tr> </table>');
	 $("#datepicker").datepicker({ onSelect: function(dateText, inst) { onSelectOpenBookingDate(); } });	 
}

function onSelectOpenBookingDate(){
	$('#openBookingButton').html('<button id="openBooking" onclick="do_OpenBooking();"> Open Booking on '+$("#datepicker").val()+'</button>');
}
function do_OpenBooking(){ 
	var requestUrl = "rest/admin/openbooking?openBookingDate="+ $("#datepicker").val();
	/* $.getJSON(requestUrl,
			    function(data) {	     	
			         alert(eval(data));              	                                            
			    });*/
	 $.ajax({
			type: "GET",		
			url:requestUrl ,			
			contentType: "application/html; charset=utf-8",
			dataType: "HTML",
			success: function(arg) {	
				alert(arg); 	
			},
			timeout: 30000,
			error: function(request, error) {
			alert( error);
			},
			cache:false,
			async: true
			});	
}
/*
function setMachinedateAvailabilityTest(){ 

	//alert('before');
	
	var requestUrl = "rest/admin/say"; //isLive=true&remarks=test";    
	var message={};
	message.name="thomas";
	//var DTO ={'message' : message };
	var message2={};
	message2.name="jacob";
	var arr=[message,message2];
	// var data="message="+ JSON.stringify(DTO);
	//var message="message=";
	$.ajax({
		type: "POST",		
		url:requestUrl ,			
		data: JSON.stringify(arr),
		contentType: "application/json; charset=utf-8",
		dataType: "JSON",
		success: function(arg) {	
			alert(arg.mess); 	
		},
		timeout: 30000,
		error: function(request, error) {
		alert(error);
		},
		async: true
		});	       
	
}*/





</script>
<div style="height: 80px;text-align: center;border-bottom:thin;border-bottom-style:solid; text-align: center;" id="headerDiv">
<label > <H1> Laundromat Booking System </H1>  </label>
</div>
<div style="height: 500px;">
<div style="width: 15%;float: left;height: 20px"></div>
<div style="width: 20%;float: left;border-right: thin;border-right-style: solid;height: 500px; font-size: 14px">
<table >
<tr>
	
		<td> <a onclick="getMachines();" href="javascript:void();" ><br><br><br>  <b>Show Machines </b> </a>  </td>
	</tr> 
		  				
	<tr>
		<td><a onclick="drawSetmachineAvailability();" href="javascript:void();" > <b>Set/update Machine Availability </b> </a>  </td>
	</tr> 
	<tr>
		<td ><a onclick="drawAddMachine();" href="javascript:void();" > <b> Add a machine </b> </a></td>		
				
	</tr>
	
	<tr> 
		<td ><a onclick="drawOpenBooking();" href="javascript:void();" > <b>Open  booking </b> </a>      </td>
	</tr>
	<tr> 
		<td ><a href="home.jsp" > <b>User Home </b> </a>      </td>
	</tr>
</table>
</div>
<div id="Machines" style="font-size: 14px;overflow:auto;height:500px;" ></div>
</div>
<div style="height: 80px;text-align: center;border-top: thin;border-top-style: solid" id="footerDiv"> footer </div>
</body>
</html>